/*
that: this对象
h: 渲染函数
tree: 要渲染的树结构--array
*/
interface Attrs {
  style: {
    [organName: string]: string
  }
  on: {
    click: Function,
    [organName: string]: Function

  }
  [organName: string]: string | Object
}

interface That {
  [organName: string]: any
}

interface Tree {
  tagName: string,
  attrs: {
    draggable: string,
    class: string,
    "data-type": string,
    [organName: string]: string
  },
  style: {
    [organName: string]: string
  },
  slot: string,
  goto: { type: string, value: string },
  context: { type: string, value: string },
  children: Tree[]
  faPosition?: []
  on: {
    click: Function,
    [organName: string]: Function
  }
}

function explain(that: That, h: Function, tree: Array<Tree>) {
  return tree.map((element) => {
    let attribute: Attrs = { style: {}, on: { click: Function } };
    let context: string = ""
    let children: {}[];

    //处理style--将属性与值一一复制
    if (element.style != undefined) {
      for (const key in element.style) {
        attribute.style[key] = element.style[key];
      }
    }

    //处理attrs中的属性--也是一一复制
    if (element.attrs) {
      // attribute.attrs = {};
      for (const key in element.attrs) {
        if (Object.hasOwnProperty.call(element.attrs, key)) {
          // attribute.attrs[key] = element.attrs[key];
          attribute[key] = element.attrs[key];
        }
      }
    }

    //绑定v-on--也是一一复制
    if (element.on) {
      if (Object.keys(element.on).length != 0) {
        for (const key in element.on) {
          if (Object.hasOwnProperty.call(element.on, key)) {
            attribute.on[key] = (e: any) => {
              //使用call确保this指向--好像没有用到
              element.on[key].call(that, e);
              // that.$store.commit(element.on[key], e);
            };
          }
        }
      }
    }
    //暂时没有用
    // if (element.nativeOn) {
    //   if (Object.keys(element.nativeOn).length != 0) {
    //     attribute.nativeOn = {};
    //     for (const key in element.nativeOn) {
    //       if (Object.hasOwnProperty.call(element.nativeOn, key)) {
    //         console.log(key);
    //         attribute.nativeOn[key] = (e) => {
    //           that.$store.commit(element.on[key], e);
    //         };
    //       }
    //     }
    //   }
    // }

    //处理页面跳转
    if (element.goto) {
      if (element.goto.type == "in") {
        //网站内部--开发版
        attribute.on.click = function () {
          if (!that.$store.state.judgeColorDom) that.pageName = element.goto.value;
        };
      } else if (element.goto.type == "out") {
        //http链接--开发版
        attribute.on.click = function () {
          if (!that.$store.state.judgeColorDom) window.open(element.goto.value as string | undefined);
        };
      }
    }

    //处理slot--目前只有导航栏用到
    // if (element.slot) {
    //   attribute.slot = element.slot;
    // }
    //处理v-bind,在data里面绑定的
    // if (element.bind) {
    //   if (Object.keys(element.bind).length != 0) {
    //     attribute.bind = {};
    //     for (const key in element.bind) {
    //       if (Object.hasOwnProperty.call(element.bind, key)) {
    //         attribute.attrs[key] = that[element.bind[key]];
    //       }
    //     }
    //   }
    // }

    // //处理props，是字符串什么的。。
    // if (element.props) {
    //   if (Object.keys(element.props).length != 0) {
    //     attribute.props = {};
    //     for (const key in element.props) {
    //       if (Object.hasOwnProperty.call(element.props, key)) {
    //         attribute.props[key] = element.props[key];
    //       }
    //     }
    //   }
    // }

    if (element.context) {
      let c = element.context;
      if (c.type == "string") {
        //目前只有这个用到
        context = c.value;
      } else if (c.type == "this") {
        //data中的值
        context = that[c.value];
      } else {
        //vuex中的值
        context = that.$store.state[c.type][c.value];
      }
    }

    //将子标签进行循环渲染
    if (element.children && element.children.length != 0) {
      children = explain(that, h, element.children);
    } else {
      children = [];
    }

    return h(element.tagName, attribute, [context, children]);
  });
}
export default explain;
